<template>
  <div class="body1">
    <div  class="home">
      <div class="materialContainer">
        <div class="box" id="login">
          <div class="title">登录</div>
          <div class="input">
            <label for="name">用户名</label>
            <input type="text" name="name" id="name">
            <span class="spin"></span>
          </div>
          <div class="input">
            <label for="pass">密码</label>
            <input type="password" name="pass" id="pass">
            <span class="spin"></span>
          </div>
          <div class="button login">
            <button @click="login()" >
              <span>登录</span>
              <i class="fa fa-check"></i>
            </button>
          </div>
          <a href="javascript:" class="pass-forgot" @click="forgetpass()">忘记密码？</a>
        </div>


        <div class="overbox">
          <div class="material-button alt-2">
            <span class="shape"></span>
          </div>
          <div class="title">注册</div>
          <div class="input">
            <label for="newusername">用户名</label>
            <input type="text" name="regname" id="newusername">
            <span class="spin"></span>
          </div>
          <div class="input">
            <label for="newpassword">密码</label>
            <input type="password" name="regpass" id="newpassword">
            <span class="spin"></span>
          </div>
          <div class="input">
            <label for="newphone">手机号</label>
            <input type="password" name="reregpass" id="newphone">
            <span class="spin"></span>
          </div>
          <div class="button">
            <button @click="zhuce()">
              <span>注册</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script src="./src/assets/js/userlogindex.js"></script>
<script src="./src/assets/js/jquery.min.js"></script>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

import $ from 'jquery'
export default {
  inject: ['reload'],
  methods:{
    forgetpass(){
      var th=this;
      th.$router.replace("/Forgetpass")
    },

    login(){
      var th=this;
      console.log($("#name").val())
      axios({
        url:'/user/login',
        method:'post',
        params:{
          'username':$("#name").val(),
          'password':$("#pass").val()
        }
      }).then((resp) =>{

        if (resp.data=='ok'){
            sessionStorage.setItem("username",$("#name").val())
          th.$router.replace('/loading')
        }else {
             setTimeout(this.$notify.error({
               title:"错误",
               message:"密码或账号错误"
             }),100)


        }
      })
    },
    zhuce(){
      var th=this;
      axios({
        url:'/user/zhuce',
        method:'post',
        params:{
          'username':$("#newusername").val(),
          'password':$("#newpassword").val(),
          'phone':$("#newphone").val()
        }
      }).then((resp)=>{
        if (resp.data=="ok"){
          this.$notify.success({
            title:"成功",
            message:"注册成功~"
          })
          setTimeout(()=>{
          this.$router.push("/loginloading")
          },500)

        }else if (resp.data=="no") {
          this.$notify.error({
            title:"错误",
            message:"用户名已存在"
          })

        }else {
          this.$notify.error({
            title:"错误",
            message:"账户和密码不能为空！"
          })
        }
      })

    }
  },
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>
<style scoped>
@import '../assets/css/userlog.css';
</style>
